<template>
  <tab-bar>
    <!--      加上传递给子组件的数据，由于数据不是变量，变量需要加：path     传入item的活跃时的颜色属性-->
    <tab-bar-item path="/home" activeColor="red">
      <template v-slot:item-icon>
        <img  src="@/assets/img/tabbar/首页1.svg" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="@/assets/img/tabbar/首页2.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>首页</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/category" activeColor="red">
      <template v-slot:item-icon>
        <img  src="@/assets/img/tabbar/1.svg" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="@/assets/img/tabbar/2.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>分类</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/cart" activeColor="red">
      <template v-slot:item-icon>
        <img  src="@/assets/img/tabbar/购物车1.svg" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="@/assets/img/tabbar/购物车2.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>购物车</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/profile" activeColor="red">
      <template v-slot:item-icon>
        <img  src="@/assets/img/tabbar/我的1.svg" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="@/assets/img/tabbar/我的2.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>我的</div>
      </template>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
//引入组件 tabbar,在components注册后 使用
import TabBar from "@/components/common/tabbar/TabBar";
//引入组件里面的内容
import TabBarItem from "@/components/common/tabbar/TabBarItem";
export default {
  name: "MaintabBar",
  components: {
    TabBar,
    TabBarItem
  }
}
</script>

<style scoped>

</style>
